<template>
  <div class="logo-container">
    <div class="logo-content">
      <img :src="env.APP_LOGO" alt="logo" class="logo-img" />
      <Transition name="fade">
        <h1 v-show="shouldShowTitle" class="logo-title">{{ env.APP_TITLE }}</h1>
      </Transition>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/store'
import { getEnv } from '@/utils/env'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const appStore = useAppStore()
const env = getEnv()

// 计算是否应该显示标题
// 1. 折叠状态：不显示
// 2. 没有二级菜单（宽度80px）：不显示
// 3. 有二级菜单（宽度240px）：显示
const shouldShowTitle = computed(() => {
  if (props.collapsed) {
    return false
  }
  // 如果没有二级菜单，侧边栏宽度只有80px，不显示标题
  return appStore.showSubMenu
})
</script>

<style lang="scss" scoped>
.logo-container {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  overflow: hidden;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);

  .logo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .logo-img {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }

    .logo-title {
      margin: 0 0 0 12px;
      font-size: 16px;
      font-weight: 600;
      color: #1890ff;
      white-space: nowrap;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 手机端适配
@media screen and (max-width: 768px) {
  .logo-container {
    padding: 0 12px;

    .logo-content {
      .logo-img {
        width: 28px;
        height: 28px;
      }

      .logo-title {
        font-size: 14px;
        margin-left: 8px;
      }
    }
  }
}
</style>

